<template>
  <div id="app">
    <search @moreB='searchinfoB' @moreA='searchinfo'></search>
    <div class="box">
      <p class="header">
        <span id="score1" v-on:click="converters">电网基建建议计划清单</span>
        <span id="score2" v-on:click="converters"> ⇋ </span>
        <span id="score3" v-on:click="converters">图表</span>
      </p>
      <div class="nav1">
        <p>
          <i class="el-icon-warning"></i
          >总部管理：规模<span>362，000</span>万元，数量规模<span>362</span>个
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;
          个单位管理：规模<span>632，000</span>万元，数量规模<span>362</span>个
        </p>
        <div>
          <el-button>导出</el-button>
          <p class="cut" v-show="jiantou">
            <i class="el-icon-setting" @click="treeA"></i>
          </p>
          <div class="tree" v-show="tree == true">
            <p><span>列展示</span><span>重置</span></p>
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[5, 9]"
              :default-checked-keys="[1, 2]"
              :props="defaultProps"
            >
            </el-tree>
          </div>
        </div>
      </div>
      <div class="table" v-show="jiantou == true">
   <!-- <biaoge v-bind:data='tableData'></biaoge> -->
            <based v-show="specical==1" v-bind:data='tableData'/>
            <domain v-show="specical==2"  v-bind:data='tableData'></domain>
             <minbased v-show="specical==3" v-bind:data='tableData'></minbased>
             <removel  v-show="specical==4" v-bind:data='tableData'></removel>
             <removelassist  v-show="specical==5" v-bind:data='tableData'></removelassist>
             <technical  v-show="specical==6" v-bind:data='tableData'></technical>
             <overhaul  v-show="specical==7" v-bind:data='tableData'></overhaul>
             <overhaulassist v-show="specical==8" v-bind:data='tableData'></overhaulassist>
             <industry  v-show="specical==9" v-bind:data='tableData'></industry>
             <fragmentary v-show="specical==10" v-bind:data='tableData'></fragmentary>
             <marketing v-show="specical==11" v-bind:data='tableData'></marketing>
             <digitization v-show="specical==12" v-bind:data='tableData'></digitization>
             <study v-show="specical==13" v-bind:data='tableData'></study>
             <consulting v-show="specical==14" v-bind:data='tableData'> </consulting>
             <education v-show="specical==15" v-bind:data='tableData'></education>
             <guquan  v-show="specical==16" v-bind:data='tableData'></guquan>
      </div>
      <div class="tubiao" v-show="jiantou == false">
        <planlssuedtubiao />
        <div ref="barchart" class="echartbox"></div>
      </div>
    </div>
  
  </div>
</template>
<script>
import search from "../../components/planIssued/search.vue";//搜索
import planlssuedtubiao from "../../components/planIssued/planlssuedtubiao.vue";//柱状图
import biaoge from "../../components/planIssued/table";//表格
import based from "../../components/planIssued/base.vue";//1.1电网基建
import domain from "../../components/planIssued/domain.vue";//1.2产业基建
import minbased from "../../components/planIssued/minbase.vue";//1.3小型电网基建
import removel from "../../components/planIssued/removel.vue";//生产技改
import removelassist from "../../components/planIssued/removelassist.vue";//生产辅助技改
import technical from "../../components/planIssued/technical.vue";//1.6产业技改
import overhaul from "../../components/planIssued/overhaul.vue";//生产大修
import  overhaulassist from "../../components/planIssued/overhaulassist.vue";//生产辅助大修
import industry from "../../components/planIssued/industry.vue";//产业大修
import fragmentary  from "../../components/planIssued/fragmentary.vue";//零星购置
import marketing  from "../../components/planIssued/marketing.vue";//电力市场营销
import digitization from '../../components/planIssued/digitization.vue';//电网数字化
import study from "../../components/planIssued/study.vue";//1.13研究开发
import consulting from "../../components/planIssued/consulting.vue";//1.14管理咨询
import education from "../../components/planIssued/education.vue";//1.15教育培训
import guquan from "../../components/planIssued/guquan.vue";//1.16股权投资

import Planlssude from "../../assets/planlssued.json";
import treeinfo from "../../assets/tree.json"
export default {
  components: { search, planlssuedtubiao,biaoge ,based,domain,minbased,removel,removelassist,technical,overhaul,overhaulassist,industry,fragmentary,marketing,digitization,study,consulting,education,guquan},
  data() {
    return {
      tree: false,
      jiantou: true,
      specical:"1",//专项名称
      sheng:'',//省名
      tableData: Planlssude.data,
      data: treeinfo.data,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {
   
  },
  methods: {
    // search信息
    //单位
    searchinfo(v){
      //  alert(v)
      this.sheng=v
      // console.log(this.sheng);
    },
    //专项
      searchinfoB(v){
      //  alert(v)
      // this.specical=v;
      if(v=='电网基建'){
         this.specical=1
      }else if(v=='产业基建'){
        this.specical=2;
      }else if(v=='电网小型基建'){
         this.specical=3;
      }else if(v=='生产技改'){
        this.specical=4;
      }else if(v=='生产辅助技改'){this.specical=5;}else if(v=='产业技改'){this.specical=6;}else if(v=="生产大修"){this.specical=7}else if(v=="生产辅助大修"){this.specical=8}else if(v=="产业大修"){this.specical=9}else if(v=='零星购置'){this.specical=10}else if(v=="电力市场营销投入"){this.specical=11}else if(v=='电网数字化'){this.specical=12}else if(v=='研究开发'){this.specical=13}else if(v=='管理咨询'){this.specical=14}else if(v=='教育培训'){this.specical=15}else if(v=='股权投资'){this.specical=16}
      // console.log(this.specical,v)
    },
    // 清单or图表
    converters() {
      this.tree = false;
      if (this.jiantou) {
        this.jiantou = false;
        // console.log(this.jiantou);
        this.$el
          .querySelector("#score1")
          .before(this.$el.querySelector("#score3"));
        this.$el
          .querySelector("#score2")
          .after(this.$el.querySelector("#score1"));
      } else {
        this.jiantou = true;
        // console.log(this.jiantou);
        this.$el
          .querySelector("#score2")
          .before(this.$el.querySelector("#score1"));
        this.$el
          .querySelector("#score2")
          .after(this.$el.querySelector("#score3"));
      }
    },
    treeA() {
      // console.log('treeA')
      if (this.tree == false) {
        this.tree = true;
      } else {
        this.tree = false;
      }
      // console.log(this.tree)
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#app {
  margin-left: 20px;
}
.box {
  width: 1760px;
  height: 765px;
  background: #fff;
  margin-top: 20px;
  margin-left: 17px;
}
.header {
  width: 660px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  padding-left: 45px;
}
.header span {
  font-weight: 300;
  cursor: pointer;
}
.header span:nth-child(1) {
  font-weight: bolder;
}
.table {
  width: 1760px;
  height: 660px;
}
.tubiao {
  width: 1760px;
  height: 660px;
  /* background: #1890ff; */
}
.nav1 {
  margin-left: 45px;
  height: 58px;
  width: 1690px;
  display: flex;
  justify-content: space-between;
}
.nav1 > p {
  width: 1270px;
  height: 38px;
  line-height: 38px;
  margin-top: 10px;
  background: #eef5f5;
  border: solid 1px #b2d1d0;
}
.nav1 > p > span {
  color: #277f7b;
  font-weight: 600;
}
.nav1 > p > span:nth-child(even) {
  color: red;
  font-size: 20px;
  font-weight: bolder;
}
.nav1 > div {
  width: 145px;
  height: 38px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.tree {
  position: absolute;
  top: 43px;
  left: 0;
  width: 170px;
  /* height: 470px; */
  background: #fff;
  /* background: #ccc; */
  z-index: 9999999;
}
.tree p {
  width: 150px;
  padding: 10px;
  background: #fff;
}
.tree p span:last-child {
  font-weight: bolder;
  color: #277f7b;
  float: right;
}
.el-tree {
  width: 170px;
  /* height: 470px; */
  line-height: 50px;
}
.el-checkbox__inner{
  background-color: #277f7b;
}
.nav1 > div > .el-button {
  display: inline-block;
  width: 60px;
  /* padding:5px 15px; */
  font-size: 12px;
  background: #eef5f5;
  border: solid 1px #b2d1d0;
  color: #277f7b;
}
.cut {
  width: 20px;
  height: 38px;
  font-size: 26px;
}
.el-icon-warning {
  color: #277f7b;
  margin: 0 15px 10px;
  background: #fff;
  border-radius: 50%;
  /* border:solid 1px #277F7B; */
}
.el-icon-success {
  background: #fff;
  color: #277f7b;
}

.el-icon-right {
  background: #1890ff;
  color: #fff;
  border-radius: 50%;
}
.el-icon-remove-outline {
  border-radius: 50%;
  background: #64b1ae;
  color: #64b1ae;
  font-size: 8px;
  border: 2px solid #c7e1e0;
}
.el-icon-circle-plus-outline {
  border-radius: 50%;
  background: #dcdcdc;
  color: #dcdcdc;
  font-size: 8px;
  border: 2px solid #ecedee;
}
.el-tree-node {
  margin-top: 10px;
}
.el-tree-node__content{
  height: 36px;
}
</style>


